<template>
    <div class="mine-container">
        <myNavbar :title="title"></myNavbar>
        <div class="addressEdit-list">
            <div class="addressEdit-list-item bb">
                <text class="addressEdit-label">收货人</text>
                <input class="addressEdit-list-item-input" placeholder="收货人姓名" :value="consignee" v-model="consignee"/>
            </div>
            <div class="addressEdit-list-item bb">
                <text class="addressEdit-label">手机号码</text>
                <input class="addressEdit-list-item-input" placeholder="收货人手机号码" type="tel" :value="phone"
                       v-model="phone"/>
            </div>
            <div class="addressEdit-list-item bb detail" @click="toSelectArea">
                <text class="addressEdit-label">所在地区</text>
                <div class="addressEdit_box">
                    <text :class="[building==''?'addressEdit-textareaTwo':'addressEdit-textareaActive']">{{ building == '' ? '点击选择地址' : building }}</text>
                </div>
                <text class="title2">&#xe61f;</text>
            </div>
            <div class="addressEdit-list-item bb detail">
                <textarea class="addressEdit-textarea" placeholder="请输入门牌号、小区、楼栋号、单元等" :value="roomNumber"
                          v-model="roomNumber"></textarea>
            </div>
            <div class="addressEdit-list-item " @click="pick">
                <text class="addressEdit-label">楼层高度</text>
                <text class="addressEdit-list-item-level">{{level==0?'有电梯':level+'楼'}}</text>
                <text class="title2">&#xe61f;</text>
            </div>
        </div>
        <div class="addressEdit-list ">
            <div class="addressEdit-list-item area">
                <text class="addressEdit-list-defalut">设为默认地址</text>
                <WSwitch class="switch" v-model="isDefault"></WSwitch>
            </div>
        </div>
        <button class="btn addressEdit-list-submit" @click="submit" :text="submitTitle" :loading="submitLoad"></button>
        <button class="btn addressEdit-list-submit-del" @click="del" :text="delTitle" :loading="delLoad"></button>
    </div>
</template>
<script>
    import {
        save,
        update,
        del,
        find
    } from '../../../api/address'

    import WSwitch from "../../../components/WSwitch";
    import myNavbar from "../../../components/myNavbar/myNavbar";

    const eeui = app.requireModule('eeui');
    const picker = weex.requireModule('picker')
    export default {
        name: 'address',
        components: {WSwitch, myNavbar},
        data() {
            return {
                title: "",
                type: "",
                isDefault: false, //是否是默认地址
                id: "",
                phone: "",
                latitude: "",
                longitude: "",
                consignee: "",
                building: "",
                areaName: "",
                address: "",
                addressDetail: "",
                roomNumber: "",
                submitOff: true,
                level:0,
                submitLoad:false,
                submitTitle:'确认保存',
                delLoad:false,
                delTitle:'删除地址'
            }
        },
        created() { // 在实例创建完成后被立即调用
            let _this = this
            this.initIconFont()
            let params = app.config.params
            // const eventChannel = this.getOpenerEventChannel()
            // eventChannel.on('sendAddressDetail', function (data) {
            if (params.type == "add") {
                this.type = params.type
                this.memberId = params.memberId
                this.title = "添加收货地址"
            } else if (params.type == "edit") {
                console.log(params)
                find(params.data.id).then(
                    res => {
                        console.log(res)
                        this.title = "编辑收货地址"
                        this.type = params.type
                        this.id = params.data.id
                        this.isDefault = res.data.isDefault //是否是默认地址
                        this.phone = res.data.phone
                        this.latitude = res.data.lat
                        this.longitude = res.data.lng
                        this.consignee = res.data.consignee
                        this.building = res.data.building
                        this.areaName = res.data.areaName
                        this.address = res.data.address
                        this.roomNumber = res.data.roomNumber
                        this.memberId = res.data.memberId
                        this.level = res.data.level
                    }
                ).catch(error => {
                })
            }
            // })
        },

        mounted() {
            let _this = this
        },

        methods: {
            //跳转到区域选择页面
            toSelectArea() {
                eeui.openPage({
                    pageName: "selectArea",
                    url: "root://pages/selectArea/selectArea.js",
                    statusBarType: 'immersion'
                }, (res) => {
                    if (res.status == "destroy" && res.pageName == "selectArea") {
                        let variable = eeui.getCaches('address')
                        if (!this.isNull(variable)) {
                            this.latitude = variable.location.split(",")[1]
                            this.longitude = variable.location.split(",")[0]
                            this.building = variable.adName + variable.address + "(" + variable.name + ")"
                            this.areaName = variable.adName
                            this.address = variable.address
                            eeui.setCaches('address', "")
                        }

                    }
                });
            },

            //表单提交事件
            submit() {
                var _this = this
                if (this.isNull(this.consignee)) {
                    eeui.toast({
                        message: '收件人姓名不能为空'
                    })
                } else if (this.isNull(this.phone)) {
                    eeui.toast({
                        message: "收件人号码不能为空"
                    });
                } else if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
                    eeui.toast({
                        message: "收件人号码输入有误"
                    });
                } else if (this.isNull(this.building)) {
                    eeui.toast({
                        message: "请点选收货地址"
                    });
                } else if (this.isNull(this.roomNumber)) {
                    eeui.toast({
                        message: "小区、门牌号信息不能为空"
                    });
                } else {
                    if (this.submitOff) {
                        this.submitOff = false
                        let data = {}
                        data.consignee = this.consignee
                        data.phone = this.phone
                        data.address = this.building + ' ' + this.roomNumber
                        data.areaName = this.areaName
                        data.building = this.building
                        data.isDefault = this.isDefault
                        data.roomNumber = this.roomNumber
                        data.memberId = this.memberId
                        data.lat = this.latitude
                        data.lng = this.longitude
                        data.level = this.level
                        if (this.type == "add") {
                            _this.submitLoad = true
                            _this.submitTitle = '加载中'
                            save(data).then(
                                res => {
                                    if (res.type == 'success') {
                                        _this.submitLoad = false
                                        _this.submitTitle = '确认保存'
                                        eeui.closePage({pageName: "addressEdit"})
                                        this.submitOff = true
                                    }
                                }
                            ).catch(error => {
                                _this.submitLoad = false
                                _this.submitTitle = '确认保存'
                                this.submitOff = true
                            })
                        } else if (this.type == "edit") {
                            data.id = this.id
                            _this.submitLoad = true
                            _this.submitTitle = '加载中'
                            update(data).then(
                                res => {
                                    _this.submitLoad = false
                                    _this.submitTitle = '确认保存'
                                    if (res.type == 'success') {
                                        eeui.closePage({pageName: "addressEdit"});
                                        this.submitOff = true
                                    }
                                }
                            ).catch(error => {
                                this.submitOff = true
                                _this.submitLoad = false
                                _this.submitTitle = '确认保存'
                            })
                        }
                    }
                }


            },

            //地址删除的事件
            del() {
                var _this = this
                _this.delLoad = true
                _this.delTitle = '加载中'
                console.log('111')
                del(this.id).then(
                    res => {
                        _this.deldelLoad = false
                        _this.delTitle = '删除地址'
                        if (res.type == 'success') {
                            eeui.closePage({pageName: "addressEdit"});
                        }
                    }
                ).catch(error => {
                    _this.deldelLoad = false
                    _this.delTitle = '删除地址'
                })
            },
            pick() {
                picker.pick({
                    items: ['有电梯', '1楼', '2楼', '3楼', '4楼', '5楼', '6楼', '7楼', '8楼', '9楼']
                }, event => {
                    if (event.result === 'success') {
                        console.log(event)
                        this.level = event.data
                    }
                })
            },
        },
    }
</script>

<style scoped>
    @import url("../../../style/wx.css");

    .mine-container {
        flex: 1;
        background-color: rgba(248, 248, 248, 0.8);
    }

    .navbar {
        width: 750px;
        height: 100px;
        margin-bottom: 20px;
    }

    .title2 {
        color: gray;
        font-size: 36px;
        font-family: iconfont2;
        color: #cccccc;
    }

    .addressEdit-list {
        margin: 20px 20px 0;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        padding: 0 20px;
    }

    .addressEdit-list-item {
        flex-direction: row;
        align-items: center;
        height: 102px;
        font-size: 28px;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        display: flex;
        align-items: center;
        position: relative;
    }

    .area {
        justify-content: space-between;
    }

    .addressEdit-list-item-input {
        width: 480px;
        height: 50px;
        font-size: 32px;
    }

    .bb {
        border-bottom-style: solid;
        border-bottom-width: 4px;
        border-bottom-color: rgba(128, 128, 128, 0.062);
    }

    .addressEdit-list-icon {
        position: absolute;
        right: 0px;
    }

    .addressEdit-label {
        width: 140px;
        padding-right: 30px;
        font-size: 24px;

    }

    .detail {
        height: 120px;
        align-items: center;
    }

    .addressEdit-textarea, .addressEdit-textareaActive {
        font-size: 30px;
        flex: 1;
        line-height: 40px;
        lines: 2;
        text-overflow: ellipsis;
        font-family: PingFang SC;
        font-weight: 400;
        max-height: 80px;
    }

    .addressEdit-textareaActive {
        color: #000;
        font-size: 30px;
    }

    .addressEdit-detail, .addressEdit-detailActive {
        font-size: 30px;
        flex: 1;
        lines: 2;
        text-overflow: ellipsis;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(135, 135, 135, 0.822);
    }

    .addressEdit-detailActive {
        color: #000;
    }

    .addressEdit-list-defalut {
        font-size: 24px;
    }

    .grey {
        color: #838383;
    }

    .addressEdit-list-submit-btn {
        font-size: 32px;
        letter-spacing: 5px;
        color: white;
    }

    .addressEdit-list-submit {
        align-items: center;
        justify-content: center;
        margin: 20px 20px 0;
        width: 710px;
        display: block;
        height: 82px;
        background-color: #409EFF;
        border-radius: 16px;
        font-size: 32px;
        color: white;
    }


    .addressEdit-list-submit-del {
        align-items: center;
        justify-content: center;
        margin: 20px 20px 0;
        display: block;
        width: 710px;
        height: 82px;
        background-color: rgb(200, 200, 200);
        border-radius: 16px;
        color: white;
        font-size: 32px;
    }


    .addressEdit-list-item-level{
        font-size: 32px;
        flex: 1;
    }

    .addressEdit-textareaTwo{
        font-size: 30px;
        color: rgba(135, 135, 135, 0.822);
    }
    .addressEdit_box{
        flex: 1;
        lines:2;
        text-overflow: ellipsis;
    }
</style>
